 |
Ajax (programming)
Totally Explained
|
|  |
|
NEW! |
All the latest news in the worlds of
computer gaming,
entertainment,
the environment,
finance,
health,
politics,
science,
stocks & shares,
technology
and much,
much,
more.
|
Everything about Ajax Programming totally explainedAjax (asynchronous JavaScript and XML) is a group of inter-related web development techniques used for creating interactive web applications. A primary characteristic is the increased responsiveness and interactivity of web pages achieved by exchanging small amounts of data with the server "behind the scenes" so that entire web pages don't have to be reloaded each time there's a need to fetch data from the server. This is intended to increase the web page's interactivity, speed, functionality and usability.
Ajax is asynchronous, in that extra data is requested from the server and loaded in the background without interfering with the display and behavior of the existing page. JavaScript is the scripting language in which Ajax function calls are usually made. Data is retrieved using the XMLHttpRequest object that's available to scripting languages run in modern browsers, or, alternatively, through the use of Remote Scripting in browsers that don't support XMLHttpRequest. In any case, it isn't required that the asynchronous content be formatted in XML.
Ajax is a cross-platform technique usable on many different operating systems, computer architectures, and web browsers as it's based on open standards such as JavaScript and the DOM. There are free and open source implementations of suitable frameworks and libraries.
Constituent technologies
Ajax uses a combination of:
- XHTML (or HTML) and CSS for marking up and styling information.
- The DOM accessed with a client-side scripting language, especially ECMAScript implementations such as JavaScript and JScript, to dynamically display and interact with the information presented.
- The XMLHttpRequest object is used to exchange data asynchronously with the web server. In some Ajax frameworks and in certain situations, an IFrame object is used instead of the XMLHttpRequest object to exchange data with the web server, and in other implementations, dynamically added
<script> tags may be used.
- XML is sometimes used as the format for transferring data between the server and client, although any format will work, including preformatted HTML, plain text and JSON. These files may be created dynamically by some form of server-side scripting.
Like DHTML and LAMP, Ajax isn't a technology in itself, but a term that refers to the use of a group of technologies.
The "core" and defining element of Ajax is the XMLHttpRequest object, which gives browsers the ability to make dynamic and asynchronous data requests without having to reload a page, eliminating the need for page refreshes.
Besides XMLHttpRequest, the use of DOM, CSS and JavaScript provides a richer "single-page" experience.
History
Techniques for the asynchronous loading of content on an existing Web page without requiring a full reload date back as far as the src attribute that could take any external URL, and by loading a page containing JavaScript that manipulated the parent page, Ajax-like effects could be attained. This set of client-side technologies was usually grouped together under the generic term of DHTML. Macromedia's Flash could also, from version 4, load XML and CSV files from a remote server without requiring a browser to be refreshed.
Microsoft's Remote Scripting (MSRS), introduced in 1998, acted as a more elegant replacement for these techniques, with data being pulled in by a Java applet with which the client side could communicate using JavaScript. This technique worked on both Internet Explorer version 4 and Netscape Navigator version 4 onwards. Microsoft then created the XMLHttpRequest object in Internet Explorer version 5 and first took advantage of these techniques using XMLHttpRequest in Outlook Web Access supplied with the Microsoft Exchange Server 2000 release.
The Web development community, first collaborating for remote scripting to enable consistent results across different browsers, created in 2002 a user-community modification to Microsoft Remote Scripting which was created to replace the Java applet with XMLHttpRequest.
Remote Scripting Frameworks such as ARSCIF surfaced in 2003 not long before Microsoft introduced Callbacks in ASP.NET.
In addition, the World Wide Web Consortium (W3C) has several recommendations that also allow for dynamic communication between a server and user agent, though few of them are well supported. These would include:
The object element defined in HTML 4 for embedding arbitrary content types into documents (replaces inline frames under XHTML 1.1)
The Document Object Model (DOM) Level 3 Load and Save Specification
Justification
The core justification for Ajax-style programming is to overcome the page loading requirements of HTML/HTTP-mediated web pages. Ajax creates the necessary initial conditions for the evolution of complex, intuitive, dynamic, data-centric user interfaces in web pages. Indeed, much of the Web's innovation and evolution during the Web 2.0 era has relied upon and benefited immensely from the capabilities of an Ajax platform.
Web pages, unlike native applications, are loosely coupled, meaning that the data they display are not tightly bound to data sources and must be first marshaled (set out in proper order) into an HTML page format before they can be presented to a user agent on the client machine. For this reason, web pages have to be re-loaded each time a user needs to view different datasets. By using the XMLHttpRequest object to request and return data without a re-load, a programmer bypasses this requirement and makes the loosely coupled web page behave much like a tightly coupled application, but with a more variable lag time for the data to pass through a longer "wire" to the remote web browser.
For example, in a classic desktop application, a programmer has the choice of populating a tree view control with all the data needed when the form initially loads, or with just the top-most level of data—which would load more quickly, especially when the dataset is very large. In the second case, the application would fetch additional data into the tree control depending on which item the user selects. This functionality is difficult to achieve in a web page without Ajax. To update the tree based on a user's selection would require the entire page to re-load, leading to a very jerky, non-intuitive feel for the web user who is browsing the data in the tree.
Advantages of Ajax
Bandwidth usage
By generating the HTML locally within the browser, and only bringing down JavaScript calls and the actual data, Ajax web pages can appear to load relatively quickly since the payload coming down is much smaller in size, and the rest of the layout doesn't have to be redrawn on each update. An example of this technique is a large result set where multiple pages of data exist. With Ajax, the HTML of the page (for example, a table structure with related and tags) can be produced locally in the browser, not brought down with the first page of the document. In addition to "load on demand" of contents, some web-based applications load stubs of event handlers and then load the functions on the fly. This technique significantly cuts down the bandwidth consumption for web applications. In addition Ajax works on the client and shares some work of the server, reducing the server load.
Separation of data, format, style, and function
A less specific benefit of the Ajax approach is that it tends to encourage programmers to clearly separate the methods and formats used for the different aspects of information delivery via the web. Although Ajax can appear to be a jumble of languages and techniques, and programmers are free to adopt and adapt whatever works for them, they're generally propelled by the development motive itself to adopt separation among the following:
Raw data or content to be delivered, which is normally embedded in XML and sometimes derived from a server-side database.
Format or structure of the webpage, which is almost always built in HTML or XHTML and is then reflected and made available to dynamic manipulation in the DOM.
Style elements of the webpage: everything from fonts to picture placement are derived by reference to embedded or referenced CSS.
Functionality of the webpage, which is provided by a combination of:
- Javascript on the client browser (Also called DHTML),
- Standard HTTP and XMLHttp or client-to-server communication, and
- Server-side scripting and/or programs using any suitable language preferred by the programmer to receive the client's specific requests and respond appropriately.
Disadvantages of Ajax
Browser integration
The dynamically created page doesn't register itself with the browser history engine, so triggering the "Back" function of the users' browser might not bring the desired result.
Developers have implemented various solutions to this problem. These solutions can involve using invisible IFRAMEs to invoke changes that populate the history used by a browser's back button. Google Maps, for example, performs searches in an invisible IFRAME and then pulls results back into an element on the visible web page. The World Wide Web Consortium (W3C) didn't include an IFRAME element in its XHTML 1.1 Recommendation; the Consortium recommends the object element instead.
Another issue is that dynamic web page updates make it difficult for a user to bookmark a particular state of the application. Solutions to this problem exist, many of which use the URL fragment identifier (the portion of a URL after the '#') to keep track of, and allow users to return to, the application in a given state. This is possible because many browsers allow JavaScript to update the fragment identifier of the URL dynamically, so that Ajax applications can maintain it as the user changes the application's state. This solution also improves back-button support. It is not, however, a complete solution.
Response-time concerns
Network latency — or the interval between user request and server response — needs to be considered carefully during Ajax development. Without clear feedback to the user,
preloading of data and proper handling of the XMLHttpRequest object, users might experience delays in the interface of the web application, something which they might not expect or understand. Additionally, when an entire page is rendered there's a brief moment of re-adjustment for the eye when the content changes. The lack of this re-adjustment with smaller portions of the screen changing makes the latency more apparent. The use of visual feedback (such as throbbers) to alert the user of background activity and/or preloading of content and data are often suggested solutions to these latency issues.
Search engine optimization
Websites that use Ajax to load data which should be indexed by search engines must be careful to provide equivalent Sitemaps data at a public, linked URL that the search engine can read, as search engines don't generally execute the JavaScript code required for Ajax functionality. This problem isn't specific to Ajax, as the same issue occurs with sites that provide dynamic data as a full-page refresh in response to, say, a form submit (the general problem is sometimes called the hidden, or deep web). While it's true that Ajax and SEO on their extremes can't be combined, there's a mid way that can be maintained by having simple URL structure through mod_rewrite, keywords in meta tags and content and enough backlinks.
Reliance on JavaScript and the DOM
Ajax relies on JavaScript and the browser's Document Object Model (DOM), which are often implemented differently by different browsers or versions of a particular browser. Because of this, sites that use JavaScript may need to be tested in multiple browsers to check for compatibility issues. It's common to see JavaScript code written twice, one part for Internet Explorer, another part for Mozilla compatibles, although this is less true with the release of IE7 and with the now-common use of JavaScript abstraction libraries
like the Prototype JavaScript Framework or Jquery. Such libraries abstract browser-specific differences from the web developer.
The level of IDE support for JavaScript used to be poor, although it's changing with more wide-spread use of tools like Drosera, Firebug, Microsoft Script Debugger/Editor, Venkman and Dragonfly.
An issue also arises if the user has switched off JavaScript support in the browser, thus disabling the functionality built into the pages.
Web analytics
Many web analytics solutions are based on the paradigm of a new page being loaded whenever new or updated content is displayed to the user, or to track a series of steps in a process such as a check-out. Since Ajax alters this process, care must be taken to account for how to instrument a page or a portion of a page so that it can be accurately tracked. Analytics systems which allow for the tracking of events other than a simple page view, such as the click of a button or link, are the ones most likely to be able to accommodate a site which heavily utilizes Ajax.
Accessibility
Non-Ajax users would ideally continue to load and manipulate the whole page as a fall back, enabling the developers to preserve the experience of users in non-Ajax environments (including all relevant accessibility concerns) while giving those with capable browsers a much more responsive experience. For this reason it's advised to first develop a full application without Ajax, and implement Ajax enhancements as an addition only (see: Progressive enhancement methodology). The same counts for JavaScript in general, as this can be disabled in most browsers, thereby hindering user experience at Web sites that rely on these technologies.
Because many people consider it unreasonable to advise against the use of JavaScript in modern web applications, the W3C Web Accessibility Initiative (WAI) is working on a specification for Accessible Rich Internet Applications (See: WAI-ARIA). In effect, ARIA allows web pages, or portions of web pages, to declare themselves as applications rather than as documents. This allows Ajax interactions and other types of JavaScript-enabled UI controls to interact with assistive technology, like screen readers for the vision-impaired.
Licensing and Patent issues
Unlike other hot topics like MP3, Ajax has been quite immune to licensing and Intellectual properties. However, since the beginning of 2006, there have been 2 patents claiming Ajax domains.
One claimed patent, No. 7,000,180, filed in 2001 was issued on Feb 14, 2006. In brief, is entitled methods, systems, and processes for The design and creation of Rich-Media applications via the Internet. It contains 83 claims that encompass a wide range of rich-media net application methods, systems, and processes.
The other, patent No 6,418,462 filed in 1999 was issued on July 9, 2002. It is said to "disclose methods allowing clients to perform tasks through a sideband communication channel, in addition to the main communication channel between a client and server".
The validity, effectiveness and enforceability of the claimed patents are unverified.
Further Information
Get more info on 'Ajax Programming'.
|
External Link Exchanges
Do you know how hard it is to get a link from a large encyclopaedia? Well we're different and will prove it. To get a link from us just add the following HTML to your site on a relevant page:
<a href="http://ajax__programming.totallyexplained.com">Ajax (programming) Totally Explained</a>
Then simply click through this link from your web page. Our crawlers will verify your link, extract the title of your web page and instantly add a link back to it. If you like you can remove the words Totally Explained and embed the link in article text.
As long as your link remains in place, we'll keep our link to you right here. Please play fair - our crawlers are watching. Your site must be closely related to this one's topic. Any kind of spamming, dubious practises or removing the link will result in your link from us being dropped and, potentially, your whole site being banned. |
| |
|
